<template>
  <div class="h-full px-4" style="background-color: #f8f8f8">
    <div>
      <a-form
        size="medium"
        :model="form"
        :label-col-props="{ span: 4 }"
        layout="vertical"
        @submit-success="submit"
      >
        <div>
          <div>
            <a-card class="mb-2" :title="t['任务名称']">
              <div class="flex justify-center items-center">
                <a-form-item field="name" required :label="t['任务名称']">
                  <a-input v-model="form.name" style="width: 200px" />
                </a-form-item>
              </div>
            </a-card>
            <a-card class="mb-2" :title="t['选择时间']">
              <a-form-item field="type" required :label="t['类型']">
                <a-radio-group
                  v-model="form.type"
                  type="button"
                  :options="translateOptions(planOptions)"
                />
              </a-form-item>

              <div style="background-color: #f8f8f8" class="py-4 flex justify-center items-center">
                <div v-if="form.type === '0'">
                  <a-form-item required :label="t['选择时间']" field="rangDate">
                    <a-range-picker v-model="form.rangDate" show-time />
                  </a-form-item>
                </div>
                <div v-if="form.type === '1'">
                  <a-form-item :label="t['每天']">
                    <a-time-picker v-model="form.rangeTime" field="rangeTime" type="time-range" />
                  </a-form-item>
                </div>
                <div v-if="form.type === '2'">
                  <a-form-item :label="t['自定义日期']">
                    <div>
                      <a-range-picker v-model="form.rangDate" field="rangDate" show-time />
                    </div>
                  </a-form-item>
                </div>

                <div v-if="form.type === '3'">
                  <a-form-item :label="t['每天']">
                    <a-time-picker v-model="form.rangeTime" type="time-range" field="rangeTime" />
                  </a-form-item>
                  <a-form-item :label="t['周期']">
                    <WeekPicker v-model="form.work" field="work" />
                  </a-form-item>
                </div>
              </div>
            </a-card>
          </div>

          <a-card class="flex-1" :title="t['动态字段']">
            <template #extra>
              <div>
                <a-button @click="addALine">{{ t["新增一行"] }}</a-button>
              </div>
            </template>
            <!-- 动态新增组件 -->
            <div v-if="form.fields.length > 0" class="overflow">
              <template v-for="(post, index) of form.fields" :key="index">
                <a-form-item :label="post.label">
                  <div class="flex gap-2 items-center w-full">
                    <a-select v-model="post.label" :options="filedList" style="width: 120px">
                    </a-select>
                    <a-input-number v-model="post.value" :step="0.01" :min="0" />
                    <a-select
                      v-model="post.type"
                      style="width: 100px"
                      :options="translateOptions(typeOptions)"
                    >
                    </a-select>
                    <!-- <a-input-number mode="button" >
                    <template #suffix> % </template>
  </a-input-number> -->
                    <a-button @click="handleDelete(index)">
                      <IconDelete />
                    </a-button>
                  </div>
                </a-form-item>
              </template>
            </div>
            <div v-else>
              <a-empty></a-empty>
            </div>
          </a-card>
        </div>
        <div class="flex justify-end mt-2">
          <a-button type="primary" html-type="submit">{{ t["下一步"] }}</a-button>
        </div>
      </a-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { queryField } from "@/api/service/field/field";

import WeekPicker from "@/components/common/WeekPicker.vue";
import { SelectOptionData } from "@arco-design/web-vue";

import { form, planOptions, typeOptions } from "../index";
import { setStep } from "../step";

const t = translate("公共模块");
const filedList = ref<SelectOptionData[]>([]);

const getFiled = () => {
  queryField({ fieldType: 1, status: 0 }).then((res) => {
    res.data.forEach((item: any) => {
      filedList.value.push({
        value: item.fieldCode,
        label: t.value?.[item.fieldName]
      });
    });
  });
};

onMounted(() => {
  getFiled();
});
const addALine = () => {
  form.value.fields.push({
    label: "",
    value: 1,
    type: 0
  });
};

const handleDelete = (index: number) => {
  form.value.fields = form.value.fields.filter((_, i) => i !== index);
};

const submit = (data: any) => {
  if (data.errors) {
    return;
  }
  setStep(2);
};
</script>

<style scoped lang="scss">
.overflow {
  overflow-y: scroll;
  max-height: 350px;
  overflow-x: hidden;
}

input[type="number"] {
  border: 1px solid gray;
  height: 28px;
  border-radius: 2px;
}
</style>
